<template>
  <div class="pic2" id="main3" ref="soc"></div>
</template>
<script>
import { EleResize } from "@/utils/resize/index.js";
let socEcharts = null;
let flag = false;
export default {
  props: {
    socData: {
      type: Array,
    },
    useColor: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      socEcharts: "",
      option: "",
      newSocData: [],
      newColorList: [],
      startCharts: null, //定时器
    };
  },
  watch: {
    // useColor: {
    //   handler(newData, oldData) {
    //     this.newColorList = newData;
    //     if (this.newColorList.length > 0) {
    //       this.zhuzhuangtu3();
    //     }
    //   },
    //   immediate: true,
    //   deep: true, // 如果是对象要深度监听
    // },
    socData: {
      handler(newData, oldData) {
        this.newSocData = newData;
        this.$nextTick(() => {
          if (this.newSocData && this.newSocData.length > 0) {
            this.zhuzhuangtu3();
          }
        });
      },
      immediate: true,
      deep: true, // 如果是对象要深度监听
    },
  },
  created() {
    this.newSocData = this.socData;
    this.newColorList = this.useColor;
  },
  mounted: function () {},
  methods: {
    zhuzhuangtu3() {
      setTimeout(() => {
        var _this = this;
        var index = 0;
        var isSet = false;
        socEcharts = this.$echarts.init(this.$refs.soc);
        socEcharts.dispose();
        socEcharts = this.$echarts.init(this.$refs.soc);
        socEcharts.clear();
        socEcharts.resize();
        const colorList = this.newColorList;
        const pieData1 = [];
        const sum = this.newSocData.reduce((per, cur) => per + cur.value, 0);
        for (let i = 0; i < this.newSocData.length; i++) {
          pieData1.push({
            ...this.newSocData[i],
            itemStyle: {
              // borderRadius: 30,
              // shadowColor: colorList[i],
              // shadowBlur: 10,
              // shadowOffsetY: 2,
              // shadowOffsetX: 0,
              // borderColor: colorList[i],
              borderWidth: 2,
            },
          });
        }
        let option;
        option = {
          color: colorList,
          title: [
            {
              text: '',
              left: "30%",
              top: "40%",
              textAlign: "center",
              textStyle: {
                fontSize: "20%",
                fontWeight: "400",
                color: "#fff",
                textAlign: "center",
                textShadowColor: "#000",
                textShadowBlur: "1",
                textShadowOffsetX: 1,
                textShadowOffsetY: 1,
              },
            },{
              text: "占有率",
              left: "30%",
              top: "50%",
              textAlign: "center",
              textStyle: {
                fontSize: "16%",
                fontWeight: "400",
                color: "#A5B6C8",
                textAlign: "center",
                textShadowColor: "#000",
                textShadowBlur: "1",
                textShadowOffsetX: 1,
                textShadowOffsetY: 1,
              },
            }
          ],
          legend: {
            icon: "roundRect",
            top: "center",
            right: "20%",
            borderRadius: 25,
            type: "scroll",
            orient: "vertical",
            pageIconColor: "#1ee0ff",
            pageIconSize: 12,
            itemWidth: 20,
            selectedMode: false,
            pageButtonItemGap: 15,
            scrollDataIndex:0,
            pageTextStyle: {
              color: "#1ee0ff",
              width: 60,
            },
            textStyle: {
              fontSize: "14%",
              color: "#fff",
              padding: [0, 55, 0, 0],
              lineHeight:30,
            },
          },
          series: [
            {
              top: "10%",
              left: "-39%",
              right: "0%",
              bottom: "10%",
              z: 4,
              dataIndex: 1,
              datasetIndex: 1,
              // avoidLabelOverlap: true,
              labelLine: {
                length: 20,
                length2: 55,
                maxSurfaceAngle: 80,
              },
              label: {
                show: false,
                position: "outside",
              },
              emphasis: {
                label: {
                  show: true,
                  rich: {
                    name: {
                      // align: "center",
                      verticalAlign: "top",
                      fontSize: "16%",
                      // color: "#1ee0ff",
                      color: "#fff",
                      lineHeight: 20,
                      textShadowColor: "#000",
                      textShadowBlur: 3,
                    },
                  },
                  // formatter: "{b} {c} \n\n",
                  formatter: (item) => {
                    const p = ((item.value / sum) * 100).toFixed(0) + "%";
                    return (
                      "{name|" + item.name + " " + item.value + "  " + p + "}"
                    );
                  },
                  padding: [0, -100],
                  alignTo: "labelLine",
                  minMargin: 5,
                  edgeDistance: 10,
                  lineHeight: 10,
                },
              },
              // name: "Access From",
              type: "pie",
              radius: ["60%", "80%"],
              avoidLabelOverlap: false,
              data: pieData1,
            },{
              name: "外边框",
              type: "pie",
              clockWise: false, //顺时加载
              hoverAnimation: false, //鼠标移入变大
              center: ["30%", "50%"],
              radius: ["88%", "88%"],
              label: {
                normal: {
                  show: false,
                },
              },
              data: [
                {
                  value: 9,
                  name: "",
                  itemStyle: {
                    normal: {
                      borderWidth: 2,
                      borderColor: "#0b5263",
                      shadowBlur: 10,
                      shadowColor: 'rgb(76,192,218)',
                    },
                  },
                },
              ],
            },
          ],
        };

        // 改变屏幕大小图表重新加载
        let resizeDiv = this.$refs.soc; // 这个是渲染echarts的div
        let listener = () => {
          socEcharts.resize();
        };
        EleResize.on(resizeDiv, listener);
        this.option = option;
        option && socEcharts.setOption(option);

        let pieChart = socEcharts;
        //鼠标移出之后，恢复自动高亮
        pieChart.on("mouseout", function (param) {
          if (!isSet) {
            clearInterval(_this.startCharts);
            _this.startCharts = setInterval(chartHover, 2000);
            flag = true;
          }
        });

        // echart.on("legendscroll", params => {
        //   // 阻止冒泡
        //   event.stopPropagation();
        //   // 滚动事件派发 --(注意这是一个死循环)
        //   echart.dispatchAction({
        //     type: "legendScroll",// params.type的是全小写事件名, 无法派发成功
        //     scrollDataIndex: params.scrollDataIndex + 1,// 目前我的是一页5条数据,而翻页的scrollDataIndex只有4条, 看百度官方给的命名是索引的意思, 实际上是条数(长度)了, 应该是echart的Bug!
        //     legendId: params.legendId
        //   });
        // }); //自动高亮显示
        var chartHover = function () {
          var dataLen = option.series[0].data.length;
          // 取消之前高亮的图形
          pieChart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: index,
          });
          index = (index + 1) % dataLen;
          // 高亮当前图形
          pieChart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: index,
          });
          if (option.series[0].data[index].value > 0) {
            option.title[0].text =
              ((option.series[0].data[index].value / sum) * 100).toFixed(0) +
              "%";
          } else {
            option.title[0].text = "0%";
          }
          pieChart.setOption(option, true);
          // 显示 tooltip
          pieChart.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: index,
          });
        };
        if (!_this.startCharts) {
          _this.startCharts = setInterval(chartHover, 3000);
        } else {
          clearInterval(_this.startCharts);
          _this.startCharts = setInterval(chartHover, 3000);
        }

        // 鼠标移动上去的时候的高亮动画
        pieChart.on("mouseover", function (param) {
          flag = false;
          isSet = false;
          clearInterval(_this.startCharts);
          //取消之前高亮图形
          pieChart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: index,
          });
          index = param.dataIndex;
          //**解决文章所述问题**// //记录上一次选中值重新进入时取消高亮
          //高亮当前图形
          pieChart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: param.dataIndex,
          });
          //显示tooltip
          pieChart.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: param.dataIndex,
          });
          if (option.series[0].data[index].value > 0) {
            option.title[0].text =
              ((option.series[0].data[index].value / sum) * 100).toFixed(0) +
              "%";
          } else {
            option.title[0].text = "0%";
          }
          pieChart.setOption(option, true);
        });
        // 先执行一遍自适应窗口
        socEcharts.resize();
      }, 10);
    },
  },
  beforeDestroy() {
    if (socEcharts) {
      socEcharts.dispose();
      socEcharts = null;
      clearInterval(this.startCharts);
    }
  },
};
</script>

<style scoped>
.pic2 {
  width: 100%;
  height: 100%;
}
</style>
